<template>
  <div class="header">
    <!-- logo -->
    <div
      class="header-logo"
      @click="toHome"
    >
      <img
        class="header-logo__ico"
        src="../assets/img/logo.png"
      >
      <span class="header-logo__text">DSP平台</span>
    </div>
    <!-- menu -->
    <el-row
      type="flex"
      align="middle"
      tag="ol"
      class="header-menu"
    >
      <li
        class="header-menu__item"
        v-permission="['home_manage_page']"
      >
        <router-link
          active-class="is-active"
          class="header-menu__link"
          to="/home"
        >首页</router-link>
      </li>
      <li
        class="header-menu__item"
        v-permission="['account_advertiser_page', 'account_admin_page']"
      >
        <router-link
          active-class="is-active"
          class="header-menu__link"
          to="/account"
        >账户</router-link>
      </li>
      <li
        class="header-menu__item"
        v-permission="['promote_page']"
      >
        <router-link
          active-class="is-active"
          class="header-menu__link"
          to="/generalize"
        >推广</router-link>
      </li>
      <li
        class="header-menu__item"
        v-permission="['data_advertiser_page', 'data_user_page', 'data_plan_page', 'data_unit_page', 'data_creative_page']"
      >
        <router-link
          active-class="is-active"
          class="header-menu__link"
          to="/data"
        >数据</router-link>
      </li>
      <li
        class="header-menu__item"
        v-permission="['financial_manage_page', 'financial_transfer_page', 'financial_transferDetail_page', 'financial_adxConsum_page']"
      >
        <router-link
          active-class="is-active"
          class="header-menu__link"
          to="/finance"
        >财务</router-link>
      </li>
      <!-- <li
        class="header-menu__item"
        v-permission="['other_aptitudeAudit_page', 'other_creativeAudit_page', 'other_permissionsManage_page', 'other_templateManage_page']"
      > -->
      <li
        class="header-menu__item"
        v-permission="['other_aptitudeAudit_page', 'other_creativeAudit_page', 'other_permissionsManage_page']"
      >
        <router-link
          active-class="is-active"
          class="header-menu__link"
          to="/other"
        >其他</router-link>
      </li>
    </el-row>
    <!-- logout -->
    <el-row
      type="flex"
      align="middle"
      class="header-logout"
    >
      <!-- 消息通知 -->
      <!-- <span
        class="notify"
        @click="handleNotify"
      >
        <i class="notify__icon iconfont iconfont-35"></i>
        <span class="notify__corner">0</span>
      </span> -->
      <!-- 账户余额 -->
      <span
        v-permission="['account_advertiser_remain']"
        v-html="accountRemain"
      ></span>
      <!-- 账户信息 -->
      <el-popover
        placement="bottom"
        trigger="hover"
        style="min-width: 100px;"
        v-model="accountDropdownVisible"
      >
        <div class="header-dropdown">
          <div
            class="header-dropdown__item"
            @click="handleAccountDetail"
          >账户信息</div>
          <div
            v-permission="['account_advertiser_updatePwd']"
            class="header-dropdown__item"
            @click="handleRePassword"
          >修改密码</div>
          <div
            class="header-dropdown__item"
            @click="logout"
          >退出</div>
        </div>
        <div slot="reference">
          <div class="header-dropdown__account">{{user.userName}} <i class="el-icon-arrow-down header-dropdown__account-arrow"></i></div>
          <div
            class="header-dropdown__enter"
            v-if="enterUserName"
          >广告主：{{enterUserName}}</div>
        </div>
      </el-popover>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { sessionStorage, getHome, hasPermission } from "@/utils";
import { millesimal } from "@/utils/decimal";
export default {
  name: "Header",
  data() {
    return {
      user: sessionStorage.get("USER"),
      enterUserName: sessionStorage.get("ENTER_USER_NAME"),
      accountDropdownVisible: false
    };
  },
  computed: {
    ...mapState({
      remain: state => state.AccountRemain.remain,
      IS_VISIBLE_NOTIFY: state => state.IS_VISIBLE_NOTIFY
    }),
    accountRemain() {
      if (hasPermission(["account_advertiser_remain"])) {
        if (this.remain > 0) {
          return `<i class="iconfont iconfont-16"></i> ${millesimal(this.remain)}元 <span class="u-plr10">|</span>`;
        }
        return `<span class="c-hint-error"><i class="iconfont iconfont-16"></i> 账户余额不足，请充值</span><span class="u-plr10">|</span>`;
      }
      return "";
    }
  },
  methods: {
    ...mapActions(["AccountRemain/UPDATE_REMAIN"]),
    ...mapMutations(["SET_IS_VISIBLE_NOTIFY"]),

    // 首页
    toHome() {
      let home = getHome();
      if (home && this.$route.name !== home) {
        this.$router.push({
          name: home
        });
      }
    },
    // 退出
    logout() {
      sessionStorage.clearAll();
      this.$router.replace({
        name: "login"
      });
    },
    // 消息通知
    handleNotify() {
      this.SET_IS_VISIBLE_NOTIFY(!this.IS_VISIBLE_NOTIFY);
    },
    // 账户信息
    handleAccountDetail() {
      // 广告主账户信息
      if (
        this.user.userType === 1 &&
        this.$route.name !== "account-advertiser-basic"
      ) {
        this.$router.push({
          name: "account-advertiser-basic",
          query: {
            action: "header",
            userId: this.user.userId,
            userType: this.user.userType
          }
        });
      }
      // 管理员账户信息
      else if (
        this.user.userType === 2 &&
        this.$route.name !== "account-admin-basic"
      ) {
        this.$router.push({
          name: "account-admin-basic",
          query: {
            userId: this.user.userId
          }
        });
      }
      this.accountDropdownVisible = false;
    },
    // 修改密码
    handleRePassword() {
      this.$router.push({
        name: "account-repassword",
        query: {
          referrer: this.$route.name,
          query: {
            ...this.$route.query
          }
        }
      });
      this.accountDropdownVisible = false;
    }
  },
  created() {
    if (hasPermission(["account_advertiser_remain"])) {
      this["AccountRemain/UPDATE_REMAIN"]();
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/assets/scss/color";

.header {
  height: 80px;
  background: $--header-background;

  &-logo {
    float: left;
    padding: 10px 20px;
    cursor: pointer;
    &__ico,
    &__text {
      float: left;
    }
    &__ico {
      height: 60px;
    }
    &__text {
      line-height: 60px;
      color: #bfbfbf;
      font-size: 16px;
    }
  }

  &-menu {
    float: left;
    height: 80px;
    margin: 0;
    padding: 0 0 0 20px;

    &__item {
      float: left;
      line-height: 80px;
      list-style: none;
      padding: 0 25px;

      & .is-active {
        color: $--background-high;

        &::after {
          background: $--background-high;
        }
      }
    }

    &__link {
      color: $--text-minor;
      font-size: 17px;
      position: relative;
      text-decoration: none;

      &::after {
        content: "";
        position: absolute;
        bottom: -15px;
        left: 50%;
        width: 70%;
        transform: translateX(-50%);
        height: 6px;
        border-radius: 3px;
        background: transparent;
      }

      &:hover {
        color: $--background-high;
      }
    }
  }

  &-logout {
    float: right;
    height: 80px;
    font-size: 14px;
    padding-right: 30px;
    color: $--background-high;
    &__exit {
      margin-left: 10px;
      cursor: pointer;
      &:hover {
        color: $--background-high;
      }
    }
  }

  &-dropdown {
    margin: -9px 0;
    line-height: 32px;
    &__item {
      cursor: pointer;
      &:not(:last-child) {
        border-bottom: 1px solid $--border-major;
      }
      &:hover {
        color: $--text-high;
      }
    }
    &__account {
      position: relative;
      padding-right: 20px;
      &-arrow {
        position: absolute;
        right: 0;
        top: 3px;
      }
    }
    &__enter {
      line-height: 18px;
      font-size: 12px;
      color: $--text-minor;
    }
  }
}

.notify {
  position: relative;
  margin-right: 15px;
  cursor: pointer;
  &__icon {
    font-size: 24px;
  }
  &__corner {
    min-width: 14px;
    text-align: center;
    line-height: 14px;
    display: inline-block;
    position: absolute;
    right: -10px;
    top: -12px;
    background: red;
    color: #fff;
    border-radius: 17px;
    padding: 6px;
    font-size: 16px;
    transform: scale(0.7);
    font-family: Tahoma !important;
  }
}
</style>